<template>
  <div>
    <h1>【aty-badge】 component demo</h1>
    <p>【aty-badge】 本质</p>
    <aty-row class="fd-badge-box">
      <aty-row>
        <aty-title level="4">1.【aty-badge】 基础</aty-title>
        <aty-row>
          <aty-col span="5">
            <aty-badge count="3">
              <aty-button />
            </aty-badge>
          </aty-col>
          <aty-col span="5">
            <aty-badge count="3">
              <aty-link />
            </aty-badge>
          </aty-col>
          <aty-col span="5">
            <aty-badge count="3">
              <aty-text />
            </aty-badge>
          </aty-col>
        </aty-row>
      </aty-row>

      <aty-row>
        <aty-title level="4">2.【aty-badge】 小红点</aty-title>
        <aty-row>
          <aty-col span="5">
            <aty-badge dot>
              <aty-button />
            </aty-badge>
          </aty-col>
          <aty-col span="5">
            <aty-badge dot>
              <aty-link />
            </aty-badge>
          </aty-col>
          <aty-col span="5">
            <aty-badge dot>
              <aty-text />
            </aty-badge>
          </aty-col>
        </aty-row>
      </aty-row>

      <aty-row>
        <aty-title level="4">3.【aty-badge】 封顶数字</aty-title>
        <aty-row>
          <aty-col span="5">
            <aty-badge count="100">
              <aty-button />
            </aty-badge>
          </aty-col>
          <aty-col span="5">
            <aty-badge count="1000" overflow-count="999">
              <aty-button />
            </aty-badge>
          </aty-col>
        </aty-row>
      </aty-row>

      <aty-row>
        <aty-title level="4">4.【aty-badge】 独立使用及自定义样式</aty-title>
        <aty-row>
          <aty-col span="5">
            <aty-badge count="10" />
          </aty-col>
          <aty-col span="5">
            <aty-badge count="10" class-name="demo-badge-alone" />
          </aty-col>
        </aty-row>
      </aty-row>

      <aty-row>
        <aty-title level="4">5.【aty-badge】 使用实例【头像】</aty-title>
        <aty-row>
          <aty-col span="5">
            <aty-badge dot class="avator" :hidden="hidden">
              <img src="https://static.zcool.cn/git_z/z/images/boy.png" alt="" width="48" height="48"  @click="show = !show">
            </aty-badge>
            <ul v-show="show" class="aty-menu-vertical">
              <li class="aty-menu-item">个人资料</li>
              <li class="aty-menu-item">我的关注</li>
              <li class="aty-menu-item" @click="hidden = !hidden">
                <aty-badge dot :hidden="hidden">
                  我的消息
                </aty-badge>
              </li>
            </ul>
          </aty-col>
        </aty-row>
      </aty-row>

      <aty-row>
        <aty-title level="4">6.【aty-badge】 动态绑定数字 + 是否隐藏</aty-title>
        <aty-row>
          <aty-col span="5">
            <aty-button @click="count++">增加</aty-button>
            <aty-button @click="count--">减少</aty-button>
            <aty-badge class="avator" :count="count" :overflowCount="6" :hidden="count < 0">
              <aty-icon type="heart" size="56" color="purple"></aty-icon>
            </aty-badge>
          </aty-col>
        </aty-row>
      </aty-row>
    </aty-row>
  </div>
</template>
<script>
export default {
  //  components: { Alert, Icon }
  data() {
    return {
      show: false,
      hidden: false,
      count: 0
    }
  }
};
</script>
<style lang="less" type="text/less">
.fd-badge-box {
  margin: 20px;
  text-align: left;
}
.demo-badge-alone {
  background: #5cb85c !important;
}
.avator{
  img{
    border-radius: 50%;
    cursor: pointer;
  }
  .aty-badge-dot{
    top: -3px;
    right: -5px;
  }
}
</style>
